<template>
  <div class="identity_wrap u-flex-center">
    <Navbar :navIndex="8" />
    <div class="pageWidth">
      <!-- 导航栏占位 -->
      <div class="nav_occupy"></div>

      <div class="img_wrap u-flex u-row-between">
        <div class="img">
          <div class="btn hand u-flex-center" @click="jump('/register?type=1')">我要供货</div>
        </div>
        <div class="img img2">
          <div class="btn hand u-flex-center" @click="jump('/register?type=2')">我要入驻</div>
        </div>
      </div>
      <div class="cate_wrap u-flex-center">
        <div
          class="cate_item hand"
          v-for="(item, index) in cateList"
          :class="{ active: cateIndex == index }"
          @click="cateClick(index)"
        >
          {{ item.name }}
          <div class="line" v-if="cateIndex == index"></div>
        </div>
      </div>
      <div class="process_img u-flex u-row-between" v-if="cateIndex == 0">
        <img src="@/image/identity/icon1.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon2.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon6.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon7.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon5.png" class="pro_img" />
      </div>
      <div class="process_text u-flex u-row-between" v-if="cateIndex == 0">
        <div class="text_item u-flex-col u-col-center" v-for="item in processList">
          <div class="text_tit">{{ item.tit }}</div>
          <div class="text_cont">{{ item.cont }}</div>
        </div>
      </div>
      <div class="process_img u-flex u-row-between" v-if="cateIndex == 1">
        <img src="@/image/identity/icon1.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon2.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon3.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon4.png" class="pro_img" />
        <img src="@/image/identity/line.png" class="pro_line" />
        <img src="@/image/identity/icon5.png" class="pro_img" />
      </div>
      <div class="process_text u-flex u-row-between" v-if="cateIndex == 1">
        <div class="text_item u-flex-col u-col-center" v-for="item in processList">
          <div class="text_tit">{{ item.tit2 }}</div>
          <div class="text_cont">{{ item.cont2 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'

  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'

  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const store = useStore()
  const router = useRouter()
  const route = useRoute()

  const cateList = [{ name: '供货商入驻流程' }, { name: '卖家入驻流程' }]
  const cateIndex = ref(0)
  const processList = ref([
    {
      tit: '公司账号注册 / 登录',
      cont: '在平台完成公司账号的注册与登录',
      tit2: '账号注册/登录',
      cont2: '在平台完成个人账号的注册与登录',
    },
    {
      tit: '企业资料提交',
      cont: '按要求提交公司基本信息及相关资质材料',
      tit2: '资料提交',
      cont2: '按要求提交个人信息及相关材料',
    },
    {
      tit: '资质审核流程',
      cont: '提交企业资质文件，等待平台审核通过',
      tit2: '保证金缴纳',
      cont2: '根据平台指引完成保证金缴纳',
    },
    {
      tit: '产品信息上传',
      cont: '将产品详情及相关资料上传至平台',
      tit2: '经营商品选择',
      cont2: '在平台内挑选拟经营的商品品类',
    },
    {
      tit: '商品正式上线',
      cont: '产品通过审核后成功上线运营',
      tit2: '店铺开设',
      cont2: '依照流程指引完成店铺创建',
    },
  ])

  onMounted(() => {})

  const cateClick = index => {
    cateIndex.value = index
  }

  const jump = url => {
    router.push(url)
  }
</script>

<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    .identity_wrap {
      .img {
        width: 44% !important;
        // aspect-ratio: 16/15;

        .btn {
          width: 165px !important;
          font-size: 17px !important;
          bottom: 70px !important;
          left: 11%;
          // border-radius: 50px;
        }
      }

      .cate_wrap {
        padding: 70px 0 80px 0 !important;

        .cate_item {
          font-size: 22px !important;
          // margin-top: 20px;
          margin-right: 40px !important;

          &:last-child {
            margin-right: 0 !important;
          }

          .line {
            width: 55px !important;
            // height: 2px;
            bottom: -15px !important;
          }
        }
      }

      .process_img {
        width: 87% !important;

        .pro_img {
          width: 85px !important;
        }
        .pro_line {
          width: 160px !important;
        }
      }

      .process_text {
        .text_item {
          width: 20%;
          .text_tit {
            font-size: 16px !important;
            margin: 20px 0 15px 0 !important;
          }
          .text_cont {
            font-size: 12px !important;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1700px) {
    .identity_wrap {
      .nav_occupy {
        height: 60px !important;
      }

      .img {
        // width: 47%;
        // aspect-ratio: 16/15;

        .btn {
          width: 140px !important;
          font-size: 15px !important;
          bottom: 60px !important;
          // left: 11%;
          // border-radius: 50px;
        }
      }

      .cate_wrap {
        padding: 60px 0 70px 0 !important;

        .cate_item {
          font-size: 20px !important;
          // margin-top: 20px;
          margin-right: 35px !important;

          &:last-child {
            margin-right: 0 !important;
          }

          .line {
            width: 50px !important;
            // height: 2px;
            bottom: -14px !important;
          }
        }
      }

      .process_img {
        width: 86.5% !important;

        .pro_img {
          width: 75px !important;
        }
        .pro_line {
          width: 135px !important;
        }
      }

      .process_text {
        .text_item {
          width: 20%;
          .text_tit {
            font-size: 14px !important;
            margin: 15px 0 10px 0 !important;
          }
          .text_cont {
            font-size: 11px !important;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1550px) {
    .identity_wrap {
      min-height: 120vh !important;

      .img_wrap {
        width: 83%;
        margin: 0 auto;
      }
      .img {
        width: 46% !important;
        // aspect-ratio: 16/15;

        .btn {
          width: 115px !important;
          font-size: 12px !important;
          bottom: 50px !important;
          // left: 11%;
          // border-radius: 50px;
        }
      }

      .cate_wrap {
        padding: 50px 0 60px 0 !important;

        .cate_item {
          font-size: 16px !important;
          // margin-top: 20px;
          margin-right: 30px !important;

          &:last-child {
            margin-right: 0 !important;
          }

          .line {
            width: 40px !important;
            // height: 2px;
            bottom: -12px !important;
          }
        }
      }

      .process_img {
        width: 86% !important;

        .pro_img {
          width: 65px !important;
        }
        .pro_line {
          width: 110px !important;
        }
      }

      .process_text {
        .text_item {
          // width: 20%;
          .text_tit {
            font-size: 13px !important;
            margin: 15px 0 10px 0 !important;
          }
          .text_cont {
            font-size: 11px !important;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1550px) {
    .pageWidth {
      width: 1200px;
    }

    .identity_wrap {
      .img {
        width: 48.5% !important;
      }
    }
  }

  .identity_wrap {
    width: 100%;
    min-height: 100vh;
    background-image: url('@/image/identity/ide-bg.png');
    background-size: 100% 100%;

    .nav_occupy {
      height: 65px;
    }

    .img {
      width: 47%;
      aspect-ratio: 16/15;
      background-image: url('@/image/identity/bg1.png');
      background-size: 100% 100%;
      position: relative;

      .btn {
        width: 203px;
        aspect-ratio: 16/4.3;
        color: #397dff;
        background: #fff;
        font-size: 20px;
        position: absolute;
        bottom: 80px;
        left: 11%;
        border-radius: 50px;
      }
    }

    .img2 {
      background-image: url('@/image/identity/bg2.png');
      background-size: 100% 100%;

      .btn {
        color: #5463ff;
      }
    }

    .cate_wrap {
      padding: 80px 0 90px 0;

      .cate_item {
        font-size: 24px;
        color: #3d3d3d;
        margin-right: 48px;
        position: relative;

        &:last-child {
          margin-right: 0;
        }

        &.active {
          color: #5463ff;
        }

        .line {
          width: 65px;
          height: 2px;
          background: #5463ff;
          position: absolute;
          bottom: -17px;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
      }
    }

    .process_img {
      width: 86%;
      margin: 0 auto;

      .pro_img {
        width: 96px;
        height: auto;
      }
      .pro_line {
        width: 190px;
        height: auto;
      }
    }

    .process_text {
      .text_item {
        width: 20%;
        .text_tit {
          font-size: 18px;
          color: #333;
          margin: 24px 0 19px 0;
        }
        .text_cont {
          font-size: 14px;
          color: #9e9e9e;
        }
      }
    }
  }
</style>
